<template>
  <d2-container>
<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <ve-pie ref="vuePie" :data="chartData"></ve-pie>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-form inline-->
<!--                 style="width: 100%; text-align: left"-->
<!--                 label-width="80px"-->
<!--                 ref="form"-->
<!--                 @submit.native.prevent="onSubmit"-->
<!--                 size="small">-->
<!--          <el-form-item label="筛选时间">-->
<!--            <div style="display: flex; flex-direction: column">-->
<!--              <div>-->
<!--                <el-date-picker-->
<!--                v-model="queryChart.time_start"-->
<!--                type="date"-->
<!--                size="small"-->
<!--                style="width: 180px"-->
<!--                format="yyyy-MM-dd"-->
<!--                :picker-options="startTimeChartPickerOption"-->
<!--                value-format="timestamp"-->
<!--                placeholder="选择开始日期">-->
<!--              </el-date-picker>-->
<!--                - -->
<!--                <el-date-picker-->
<!--                  v-model="queryChart.time_end"-->
<!--                  type="date"-->
<!--                  size="small"-->
<!--                  style="width: 180px"-->
<!--                  format="yyyy-MM-dd"-->
<!--                  :picker-options="endTimeChartPickerOption"-->
<!--                  value-format="timestamp"-->
<!--                  placeholder="选择结束日期">-->
<!--                </el-date-picker>-->
<!--              </div>-->
<!--              <div>-->
<!--                <el-radio-group v-model="queryChart.type">-->
<!--                  <el-radio label="all">全部</el-radio>-->
<!--                  <el-radio label="month">月</el-radio>-->
<!--                  <el-radio label="week">周</el-radio>-->
<!--                  <el-radio label="day">日</el-radio>-->
<!--                </el-radio-group>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button type="primary"-->
<!--                       native-type="submit">筛选</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="80px"
             ref="form"
             @submit.native.prevent="onSearch"
             size="small">
      <el-form-item>
        <el-input v-model="query.keywords"
                  placeholder="昵称 | 用户ID | 流水号"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="筛选时间">
        <el-date-picker
          v-model="query.time_start"
          type="date"
          size="small"
          style="width: 180px"
          format="yyyy-MM-dd"
          :picker-options="startTimePickerOption"
          value-format="timestamp"
          placeholder="选择开始日期">
        </el-date-picker>
        -
        <el-date-picker
          v-model="query.time_end"
          type="date"
          size="small"
          style="width: 180px"
          format="yyyy-MM-dd"
          :picker-options="endTimePickerOption"
          value-format="timestamp"
          placeholder="选择结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="query.balance_type">
          <el-option label="全部"
                     value=""></el-option>
          <el-option label="支出"
                     value="2"></el-option>
          <el-option label="收入"
                     value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   native-type="submit">筛选</el-button>
<!--        <el-button native-type="reset">重置</el-button>-->
      </el-form-item>
    </el-form>
    <el-table :data="list"
              border
              :resizable="false"
              stripe>
      <el-table-column label="流水号"
                       prop="trade_no"></el-table-column>
      <el-table-column label="用户ID"
                       prop="user_id"></el-table-column>
      <el-table-column label="用户昵称"
                       prop="name"></el-table-column>
      <el-table-column label="金额"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{money(row) | moneyFilter}}
        </template>
      </el-table-column>
<!--      <el-table-column label="操作后金额"-->
<!--                       prop="time_create">-->
<!--        <template slot-scope="{ row }">-->
<!--          {{row.after_amount | moneyFilter}}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="创建时间"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{row.time_create | timeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="类型"
                       prop="status">
        <template slot-scope="{ row }">
          {{row.balance_type === 1 ? '收入' : '支出'}}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="属性"
                       prop="status">
        <template slot-scope="{ row }">
          {{TYPE_MAP[row.type]}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="currentPage"
                   :page-size="limit"
                   style="display: flex;justify-content: center;"
                   :total="total">
    </el-pagination>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import commonCurd from '@/mixin/common-curd'
import TYPE_MAP from './config'
import { fetchStat } from './api'

export default {
  name: 'users',
  data () {
    const _this = this
    return {
      chartData: {
        columns: ['类型', '金额'],
        rows: []
      },
      queryChart: {
        time_start: '',
        time_end: '',
        type: 'all'
      },
      TYPE_MAP,
      query: {
        keywords: undefined,
        limit: 12,
        page: 1,
        time_start: '',
        time_end: '',
        balance_type: ''
      },
      startTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.time_end > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.query.time_end < timestamp
        }
      },
      endTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.time_start > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.query.time_start > timestamp
        }
      },
      startTimeChartPickerOption: {
        disabledDate (date) {
          if (!_this.queryChart.time_end > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.queryChart.time_end < timestamp
        }
      },
      endTimeChartPickerOption: {
        disabledDate (date) {
          if (!_this.queryChart.time_start > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.queryChart.time_start > timestamp
        }
      }
    }
  },
  mixins: [commonCurd],
  async asyncData ({ store, route }) {
    return store.dispatch('bill/fetchList', { page: 1, limit: 12 })
  },
  computed: {
    ...mapGetters('bill', ['list', 'total'])
  },
  async mounted () {
    await this.fetchStat()
  },
  methods: {
    ...mapActions('bill', ['fetchList']),
    money ({ amount }) {
      return Math.abs(amount)
    },
    async fetchStat () {
      const { time_start, time_end, ...r } = this.queryChart
      const params = { ...r }
      if (time_start) {
        params.time_start = time_start / 1000
      }
      if (time_end) {
        params.time_end = time_end / 1000
      }
      const { data: { outcome, income } } = await fetchStat(params)
      this.chartData.rows = [
        { 类型: '收入（元）', 金额: income / 100 },
        { 类型: '支出（元）', 金额: outcome / 100 }
      ]
      this.$forceUpdate()
    },
    onSubmit () {
      this.fetchStat()
    },
    onSearch () {
      this.fetch(1)
    },
    onReset () {
      this.$refs.form.resetFields()
      this.query = this.$options.data
      this.fetch(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.fit-size {
  height: 259px;
}
</style>
